<template>
  <u-popup :show="state.show"  bgColor="transparent" mode="center"  :closeOnClickOverlay="false"  closeable @close="close">
    <view class="Model-wapper">
		<!-- <view class="title-Model ss-flex ss-col-enter">
		<image src="@/static/icon_zjmmicon.png" mode=""></image> 
		输入资金密码
		</view> -->
		<view class="tip">
			请输入库存数量
		</view>
		<view class="input-wapper ss-p-20 ss-m-t-70">
				<input v-model="state.stock" type="digit" placeholder="请输入库存数量" ></input>
		</view>
		<view class="button-wapper  ss-m-t-30">
			<button class="main-button" style="margin-top: 70rpx;" @tap="confirm">确认</button>
		</view>
    </view>
  </u-popup>
<!--  <u-keyboard ref="uKeyboard" mode="number" :dotDisabled="true" borderColor="transparent"  :show="state.show" hairline :tooltip="false" @backspace="backspace"  @change="valChange"></u-keyboard> -->
</template>

<script setup>
  import { computed, watch, ref, reactive, unref, nextTick } from 'vue';
  import sheep from '@/sheep'


 
  let state=reactive({
	  show:false,
	  id:'',
	  index:'',
	  stock:'',

  })


  
  function close() {
    emit('close');
	 state.password=''
    state.show = false;
  }
  
  const valChange = (val) => {
	  if(val.length>5){
		  return
	  }
    // 将每次按键的值拼接到value变量中，注意+=写法
    state.password += val;
    
  };
  function open({stock,id,index}) {
	  state.stock=stock
	   state.id=id
	    state.index=index
    state.show = true;
  }
  const backspace = () => {
    // 删除value的最后一个字符
    if (  state.password.length) {
        state.password =   state.password.substr(0,   state.password.length - 1);
    }
    console.log(  state.password);
  };
  
  function confirm() {
	  if(!state.stock>0){
		
		  
		  return 
	  }
	    state.show = false;
	emit('confirm',{id:state.id,stock:state.stock,index:state.index});
   
  }
  function cancel() {
	  emit('cancel');
  
  }
  let emit = defineEmits(['open', 'close', 'confirm','cancel']);
  defineExpose({ close, open });
</script>

<style lang="scss" scoped >
	.input-wapper{
		border-radius: 32rpx;
		border: 2rpx solid rgba(0,0,0,0.4);
		input{
			color: #233;
		}
	}
	::v-deep .u-code-input__item{
		border: none !important;
		margin-right: 17rpx;
		background: #F3F5F7;
		border-radius: 15rpx;
	}
	
	::v-deep .u-border{
		border-radius: 16rpx;
		border: 2rpx solid #EAEAEA;
	}
	.button {
		
	
		
		flex-shrink: 0;
		margin-top: auto;
		
		height: 84rpx;
		background: linear-gradient( 270deg, #EB64F8 0%, #925AFB 45%, #3354FE 100%);
		border-radius: 42rpx;
		font-weight: 400;
		font-size: 31rpx;
		width: 100%;
		line-height: 84rpx;
		color: #fff;
	
		margin-top: 52rpx;
	
		&.dis {
			background-color: #CCCCCC;
		}
	
		&::after {
			display: none;
		}
	
	
	}
	
.Model-wapper{
	width: 649rpx;
	min-height: 466rpx;
	border-radius: 38rpx;
	padding:25rpx 34rpx;
	box-sizing: border-box;
	background: #fff;
	
}
	
.content{
	margin-top:36rpx;
	font-size: 28rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	color: rgba(0,0,0,0.65);
	line-height: 44rpx;
}
.button-wapper{
	
}
.tip{
	
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 23rpx;
	color: #999999;
	line-height: 32rpx;
	margin-top: 23rpx;
}
.title-Model{
	image{
		width: 56rpx;
		height:64rpx;
		margin-right:15rpx;
	}
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 27rpx;
	color: #333333;
	line-height: 38rpx;
	
}
</style>
